<template>
  <div class="tree-dialog">
    <div class="treeContent" style="overflow: auto">
      <div class="tree-content-left">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>

        <el-tree
          @check="checkChange"
          show-checkbox
          node-key="id"
          class="filter-tree"
          :data="dataList"
          :props="{ children: 'childs', label: 'name', value: 'id' }"
          :filter-node-method="filterNode"
          :default-checked-keys="checkedRoleIds"
          ref="knowledgeRef"
        >
        </el-tree>
      </div>
    </div>
    <div class="tree-imgs" v-if="imgsList.length">
      <!-- <h6>教案</h6> -->
      <div
        :class="{ 'tree-bg-show': item.isActive }"
        @click="imgClick(item, index)"
        v-for="(item, index) in imgsList"
        :key="index"
      >
        <img v-if="item.imgPath" :src="domain + item.imgPath" alt="" />
        <img v-else src="/src/assets/prepare-teach/weizhiwenjian.png" alt="" />
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.fileName"
          placement="top-start"
        >
          <p>{{ item.fileName }}</p>
        </el-tooltip>
      </div>
    </div>
    <cus-empty v-else class="noData"/>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import $, { emitter } from "$";
import { ElMessage } from "element-plus";
export default defineComponent({
  props: {
    id: {
      type: Boolean,
    },
    dataList: {
      type: Array,
      require: true,
    },
    accept: {
      type: String,
    },
    type: String
  },
  setup(props, { emit }) {
    let domain = ref(import.meta.env.VITE_APP_BASE_URL);
    let knowledgeRef = ref(null);
    let imgsList = ref([]);
    let filterText = ref("");
    let checkedRoleIds = reactive([]);

    let filterNode = (value, node) => {
      if (!node) return true;
      return node.name.indexOf(value) !== -1;
    };
    onMounted(() => {
      checkChange();
    });
    const checkChange = async () => {
      let code = localStorage.getItem("subjectId");
      let _list = knowledgeRef.value.getCheckedKeys();
      let res = await $.http.json("/admin/material/queryUserPrivateMaterial", {
        subject: code,
        chapterId: _list,
        type: props.type,
      });
      imgsList.value = res.json;
    };
    watch(
      filterText,
      $.debounce(() => knowledgeRef.value.filter(filterText.value), 300)
    );
    let imgClick = (item, _index) => {
      item.isActive = !item.isActive;
    };
    // 确定发送请求
    const save = async (resolve, reject) => {
      let fileList =
        imgsList.value && imgsList.value.filter((item) => item.isActive);
      let _list =
        fileList &&
        fileList.map((item) => {
          item.ext = item.ext;
          item.filePath = item.filePath;
          item.fileSize = item.size;
          item.oriFilename = item.fileName;
          return item;
        });
      resolve(_list);
      let __params = {
        fileList: _list,
        isPublic: 0,
        courseIndexId: props.id,
        type: props.type,
      };
      // 教案是5 说课视频是3
      let res = await $.http.json(
        "/admin/material/saveUserMaterial",
        __params,
        { headers: { type: 1 } }
      );
      if (res.result) {
        ElMessage.success("上传成功");
        emitter.emit("handout-init");
        resolve(res, props.accept);
      } else {
        ElMessage.error("未选择资料，请重新上传");
        reject();
      }
    };
    return {
      knowledgeRef,
      filterNode,
      checkChange,
      filterText,
      imgClick,
      imgsList,
      checkedRoleIds,
      domain,
      save,
    };
  },
});
</script>
<style scoped lang="scss">
.noData {
  margin: 0 auto;
}
.tree-dialog {
  display: flex;
  height: 300px;
  .treeContent {
    .tree-content-left {
      padding-right: 20px;
      // max-width: 800px;
      width: 260px;
    }
  }
  .tree-imgs {
    flex: 2;
    overflow: auto;
    height: 300px;
    // & > h6 {
    //     margin-left: 26px;
    // }
    div {
      margin-left: 15px;
      cursor: pointer;
      display: inline-block;
      img {
        width: 120px;
        height: 120px;
        padding: 10px 10px;
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
      }
      p {
        width: 120px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        margin-left: 10px;
      }
    }
    .tree-bg-show {
      margin-left: 15px;
      cursor: pointer;
      display: inline-block;
      background: rgba(0, 0, 0, 0.15);
    }
  }
}
</style>